<template>
  <div>
    <div class="n-song">
      <div class="song-fsize">
        <el-link :underline="false" href="#" target="_blank" class="e-title"
          >新歌推荐</el-link
        >
      </div>
      <div class="song-fleft"><el-link>更多</el-link></div>
    </div>
    <div class="container">
          <div class="Nnav">
            <div class="control-box">
              <ul>
                <li class="box_prev">
                  <img src="../../../assets/images/left_02.png" alt="prev" />
                </li>
                <li class="box_next">
                  <img src="../../../assets/images/right_02.png" alt="next" />
                </li>
              </ul>
              <div class="bigbox">
                <div id="switcher">
                  <div class="content_1">
                    <div class="box" v-for="item in Songlists" :key="item.SongID">
                      <a href="#"
                        ><img
                          :src="getimg(item.songPicture)"
                          width="100%"
                          height="100%"
                          alt=""
                      /></a>
                    </div>
                  </div>
                  <div class="content_2"></div>
                </div>
              </div>
            </div>
          </div>
    </div>
  </div>
</template>
<script scoped>
import $ from "jquery";

export default {
  data() {
    return {
      //数组接收res
      Songlists: [],
      getimg(src) {
        return require("../../../assets/images/" + src);
      },
    };
  },
  //页面加载后自动调用
  mounted() { 
    // this.GetSonglist(); 

  },
  methods: {
    //获取最新最热歌曲
    GetSonglist: function () {
      var thisvue = this;
      this.$http
        .get("http://localhost:31551/api/Song/GetSongTimeQuantity/")
        .then(function (res) {
          thisvue.Songlists = res.data;
        });
    },
  },
  created() {
    $(document).ready(function () {
      var length = $(".content_1").children(".box").length; //盒子个数
      var boxWidth = $(".bigbox").width() / 4; //视窗宽度除以4获得移动宽度
      var virtual = length * boxWidth; //切换的临界点
      var speed = 1000; //移动速度，速度建议要小于间隔时间的一半。
      var time = 3000; //间隔时间
      $(".box").width(boxWidth - 3);

      var Item = $("#switcher"); //要移动的元素
      Item.css({ position: "relative" }); //设置position
      var move = boxWidth + "px"; //移动的范围，是一个box的宽度。
      var leftCriticalPoint = "-" + virtual + "px"; //有n个盒子，就以n个盒子的长度作为跳跃点

      var flag = true; //点击允许

      scrollContentStructure(length);

      function scrollContentStructure(length) {
        if (length < 4) {
          $("#switcher").width(boxWidth * (length + 4)); //视窗宽度 条状体l+4，补体6-l；假设l=3，条状体7.补体3
          if (length != 0) {
            var content_1 = $(".content_1").html();
            for (var i = 0; i < 6 - length; i++) {
              $(".content_1").append(content_1); //最少6个盒子，补够
            }
          }
        } else {
          $("#switcher").width(virtual * 2);
          $(".content_2").html($(".content_1").html()); //复制
        }
      }

      if (length != 0) {
        var callback = setInterval(moving, time);
      }

      function moving() {
        flag = false;
        if (Item[0].style.left == leftCriticalPoint) {
          Item[0].style.left = "0px";
        }
        Item.animate({ left: "-=" + move }, speed, function () {
          if (Item[0].style.left == leftCriticalPoint) {
            Item[0].style.left = "0px";
          }
        });
        flag = true;
      }

      $("li").click(function () {
        //当前处于动画状态及可点击状态判断
        //标志位防止事件栈积累，
        if (!Item.is(":animated") && flag) {
          var left = Item[0].style.left;
          clearInterval(callback);

          if ($(this).index() == 1) {
            if (left == leftCriticalPoint) {
              Item[0].style.left = "0px";
            }
            Item.animate({ left: "-=" + move }, speed, function () {
              if (Item[0].style.left == leftCriticalPoint) {
                Item[0].style.left = "0px";
              }
              callback = setInterval(moving, time);
            });
            // console.log("右");
          } else if ($(this).index() == 0) {
            if (isNaN(parseInt(left)) || left == "0px") {
              Item[0].style.left = leftCriticalPoint;
            }
            Item.animate({ left: "+=" + move }, speed, function () {
              if (Item[0].style.left == "0px") {
                Item[0].style.left = leftCriticalPoint;
              }
              callback = setInterval(moving, time);
            });
          }
        }
      });
    });
  },
};
</script>
<style scoped>
.control-box {
  width: 930px;
  height: 230px;
  margin-top: 30px;
}

.control-box ul {
  list-style: none;
  position: relative;
}

.control-box ul li {
  position: absolute;
  top: 50px;
  cursor: pointer;
}

.box_prev {
  left: 0;
}

.box_next {
  right: 0;
}

.bigbox {
  overflow: hidden;
  width: 800px;
  height: 190px;
  margin: 0 auto;
}

#switcher {
  height: 190px;
  left: 0px;
}

.content_1.content_2 {
  width: 100%;
  float: left;
}

.box {
  transition: all 0.7s ease 0s;
  width: 255px;
  height: 190px;
  float: left;
  border-left: 3px white solid;
}

.box:hover {
  opacity: 0.5;
}
</style>